import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { DatePicker, Divider, Drawer } from 'antd';
import type { SorterResult } from 'antd/es/table/interface';

import React, { useRef, useState } from 'react';
import SensorDetail from '../../Locker/List/components/LockerDetail';
import type { TableListItem } from './data';
import { findDeviceWarningList } from './service';
import { queryLockerDetail } from '../../Locker/List/service';
import WarningConfirmModal from '@/pages/Device/Warning/components/WarningConfirmModal';

const TableList: React.FC = (props: any) => {
  const [sorter, setSorter] = useState<string>('');
  const [currentDevice, setCurrentDevice] = useState<TableListItem>();
  const [detailVisible, setDetailVisible] = useState<boolean>(false);
  const [confirmShow, setConfirmShow] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const [deviceNo] = useState<string>(props?.match.params.deviceNo || '');

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
            dataIndex: 'id',
    },
    {
      title: '设备编号',
            dataIndex: 'deviceNo',
      hideInTable: true,
      hideInForm: true,
      render: (_, record) => <div>{record.deviceNo}</div>,
    },
    {
      title: '告警类型',
            dataIndex: 'warningLevel',
      hideInSearch: true,
      render: (_, record) => {
        if (record.warningLevel === 1) {
          return '警告';
        }
        if (record.warningLevel === 2) {
          return '提醒';
        }
        return '';
      },
    },
    {
      title: '告警类型',
            dataIndex: 'warningType',
      hideInSearch: true,
      render: (_, record) => {
        if (record.warningType === 1) {
          return '用户超时';
        }
        if (record.warningType === 2) {
          return '电量耗尽';
        }
        if (record.warningType === 3) {
          return '电量低';
        }
        if (record.warningType === 4) {
          return '设备遇阻';
        }
        return '';
      },
    },
    {
      title: '首次告警时间',
            dataIndex: 'firstTime',
      hideInSearch: true,
    },
    {
      title: '最近告警事时间',
            dataIndex: 'latestTime',
      renderFormItem: (_, { onChange }) => (
        <DatePicker.RangePicker
          showTime
          format="YYYY-MM-DD HH:mm"
          onChange={(value) => onChange && onChange(value)}
        />
      ),
    },
    {
      title: '确认状态',
            dataIndex: 'status',
      render: (_, record) => {
        if (record.status === 1) {
          return '未确认';
        }
        if (record.status === 2) {
          return '已确认';
        }
        return '';
      },
    },
    {
      title: '确认人员',
            dataIndex: 'operationUserName',
      hideInSearch: true,
    },
    {
      title: '操作',
            dataIndex: 'option',
      hideInSearch: true,
      render: (_, record) => {
        // const onClickDetail = () => {
        //   setCurrentDevice(record);
        //   setDetailVisible(true);
        // };

        const showConfirmModal = () => {
          setCurrentDevice(record);
          setConfirmShow(true);
        };
        return (
          <div>
            {record.status === 1 && (
              <>
                <a onClick={showConfirmModal}>确认</a>
                <Divider type="vertical" />
              </>
            )}
            {/*<a onClick={ onClickDetail }>详情</a>*/}
          </div>
        );
      },
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<TableListItem>
        headerTitle={`${deviceNo}`}
        actionRef={actionRef}
        rowKey="id"
        scroll={{ x: true }}
        onChange={(_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<TableListItem>;
          if (sorterResult.field) {
            setSorter(`${sorterResult.field}_${sorterResult.order}`);
          }
        }}
        params={{
          sorter,
        }}
        options={{ fullScreen: false, density: false, setting: false, reload: true }}
        tableAlertRender={() => false}
        request={(params = {}) => {
          return findDeviceWarningList({ ...params, deviceNo });
        }}
        columns={columns}
        rowSelection={false}
      />
      <Drawer
        visible={!!currentDevice?.id && detailVisible}
        onClose={() => setDetailVisible(false)}
        width="30%"
      >
        {!!currentDevice?.id && detailVisible && (
          <SensorDetail
            deviceNo={currentDevice?.deviceNo}
            request={(id) => queryLockerDetail({ deviceNo: id })}
          />
        )}
      </Drawer>

      {confirmShow && currentDevice && (
        <WarningConfirmModal
          actionType={actionRef.current}
          deviceWarning={currentDevice}
          modalVisible={confirmShow}
          onSubmit={() => setConfirmShow(false)}
          onCancel={() => setConfirmShow(false)}
        />
      )}
    </PageHeaderWrapper>
  );
};

export default TableList;
